<section [ngClass]="['bg' + default, 'text' + defaultInv]">
	<div class="container flex flex-col justify-center px-4 py-8 mx-auto md:p-8">
		<h2 class="text-2xl font-semibold sm:text-4xl">Frequently Asked Questions</h2>
		<p class="mt-4 mb-8" [ngClass]="['text' + plainInv]">
			Sagittis tempor donec id vestibulum viverra. Neque condimentum primis orci at lacus amet
			bibendum.
		</p>
		<div class="space-y-4">
			<details *ngFor="let faq of faqs" class="w-full border rounded-lg">
				<summary
					class="px-4 py-6 focus:outline-none"
					[ngClass]="['focus-visible:ring' + primary]"
				>
					{{ faq.question }}
				</summary>
				<p class="px-4 py-6 pt-0 ml-4 -mt-4" [ngClass]="['text' + plainInv]">
					{{ faq.answer }}
				</p>
			</details>
		</div>
	</div>
</section>
